<template>
  <div>
    <van-nav-bar
      title="连锁门店"
      left-text=""
      left-arrow
       @click-left="returnTo"
    />

    <van-row>
      <van-col span="7">
        <span>&nbsp;&nbsp;余额: </span><span style="color: red">￥</span
        ><span style="color: red">{{ store.amount }}</span>
      </van-col>
      <span>积分:</span
      ><span style="color: red"> {{ store.credits }}</span>
    </van-row>

    <van-card :thumb="storeimage" style="text-align: left">
      <template #tags>
        <!-- 门店名称 -->
        <van-cell class="storeName">{{ store.storeName }}</van-cell>

        <!-- 门店星级 -->
        <div class="interval">
          <van-rate
            color="rgb(255, 167, 56)"
            v-model="store.country"
            size="20px"
            readonly
          />
          <!-- 门店距离 -->
          <span class="distance">{{store.jvli}} km</span>
        </div>

        <div class="interval">
          <van-tag class="min1" type="medium" size="large"
            >工位:&nbsp;&nbsp;{{ store.countA }}</van-tag
          >
          &nbsp;
          <van-tag class="min2" type="medium" size="large"
            >空闲:&nbsp;&nbsp;{{ store.idleNumber }}</van-tag
          >
          &nbsp;
          <van-tag class="min3" type="medium" size="large"
            >使用中:&nbsp;&nbsp;{{ store.countB }}</van-tag
          >
        </div>

        <!-- 门店标签 -->
        <div class="interval">
          <van-tag
            class="keyword"
            v-for="(item, index) in storeLabels"
            :key="index"
            :list="item.list"
            >{{ item.labelContent }}</van-tag
          >&nbsp;
        </div>

        <!-- 门店地址 -->
        <van-cell class="address"
          ><van-icon name="location" color="skyblue" />
          {{ store.address }}</van-cell
        >
      </template>
    </van-card>

    <div style="height: 1px; background-color: rgb(247, 247, 247)"></div>
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      key: "d1be5f08c6456683633e78f7c28c47df",
      rectangle: "", //自己所在位置的经纬度
      storeimage: "", //店铺图片地址
      store: {}, //店铺信息
      evaluate: {}, //门店评价星级
      storeLabels: [], //店铺标签
      storeId: '',
      userId:'',
    };
  },
  created() {
    //如果使用query方式传入的参数使用this.$route.query 接收
    //如果使用params方式传入的参数使用this.$router.params接收
     this.storeId = this.$route.query.storeId;
     this.userId = this.$route.query.userId;
    this.getLocationInfo();
  },
  methods: {

       // 获取用户位置信息
    async getLocationInfo() {
      const params = {
        key: this.key,
      };
      const { data } = await axios.get("https://restapi.amap.com/v3/ip", {
        params,
      });
      // data.adcode值为获取天气需要的city值
      let aaa = data.rectangle.split(";");
      this.rectangle = aaa[0];
      // alert(JSON.stringify(this.rectangle));
      this.selectStore();
      this.selectStoreLabels();
    },


    //查询店铺信息
    selectStore() {
      var _this = this;
      this.$http
        .get(
          "/tbStore/selectStoreByStoreIdAndUserId?storeId=" +
            this.storeId +
            "&userId=" +
            this.userId
        )
        .then(function (response) {
          console.log("用户绑定的门店信息。。。。。");
          console.log(JSON.stringify(response));
          if (response.data.code == 200) {
            _this.store = response.data.data; //查询出来的门店信息
            _this.storeimage = response.data.data.storeimage; //查询出来的店铺图片地址
            _this.mendian();
          }
        })
        .catch(function (error) {
          //alert(JSON.stringify(error));
          _this.$toast("你错了。。。");
        });
    },

    //查询店铺标签信息
    selectStoreLabels() {
      var _this = this;
      this.$http
        .get("/storeLabels/selectLabelByStoreId?storeId=" + this.storeId)
        .then(function (response) {
          console.log("店铺标签信息。。。。。");
          console.log(JSON.stringify(response));
          if (response.data.code == 200) {
            _this.storeLabels = response.data.data; //查询出来的店铺标签
          }
        })
        .catch(function (error) {
          //alert(JSON.stringify(error));
          console(error);
          _this.$toast.error("你错了。。。");
        });
    },
     async mendian() {
      let num = -1;
      //不是直接使用axios 而是使用$http
      //baseURL="http://localhost:8080"
      var _this = this;
        const params = {
          key: this.key,
          origins: this.rectangle,
          destination:
            this.store.longitude + "," + this.store.latitude,
        };
        const { data } = await axios.get(
          `https://restapi.amap.com/v3/distance`,
          { params }
        );
          // alert(JSON.stringify(data.results));
        //  alert(JSON.stringify(this.tableData[i].longitude))
        // alert(
        //   JSON.stringify(
        //     this.tableData[i].longitude + "," + this.tableData[i].latitude
        //   )
        // );
       this.store.jvli = data.results[0].distance / 1000;
        // alert(JSON.stringify(this.store.jvli))
        
    },
    returnTo() {
       //跳转页面时传参
      this.$router.push({
        path: "/MyStores",
        query: { id:this.$route.query.userId },
      });
      
    },
  },
  components: {
    // 组件注册的地方 相当于pom文件
  },
};
</script>
<style scoped>
.interval {
  margin-top: 5px;
}

.van-row {
  height: 50px;
  background-color: rgb(247, 247, 247);
  text-align: left;
  padding-left: 1px;
  line-height: 50px;
}

.van-image__error,
.van-image__img,
.van-image__loading {
  display: block;
  width: 80px;
  height: 85px;
}

.distance {
  text-align: right;
  float: right;
  font-size: 16px;
  line-height: 20px;
  color: rgb(153, 153, 179);
}

.van-cell {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  box-sizing: border-box;
  width: 100%;
  padding: 0px;
  overflow: hidden;
  color: #323233;
  font-size: 16px;
  line-height: 24px;
  background-color: #fff;
}

.evaluate {
  text-align: left;
}
.min1 {
  background-color: #39a9ed;
  padding: 2px 8px 2px 1px;
  font-size: 16px;
  border-radius: 4px;
}
.min2 {
  background-color: #38ac83;
  padding: 2px 8px 2px 1px;
  font-size: 16px;
  border-radius: 4px;
}
.min3 {
  background-color: #df7007bb;
  padding: 2px 8px 2px 1px;
  font-size: 16px;
  border-radius: 4px;
}

.keyword {
  color: rgb(8, 164, 236);
  background-color: rgb(191, 231, 249);
  margin-bottom: 5px;
  margin-right: 5px;
  font-size: 16px;
}

.address > .van-cell__value--alone {
  font-size: 16px;
  color: rgb(153, 153, 179);
}

.van-card {
  position: relative;
  box-sizing: border-box;
  padding: 8px 16px;
  color: #323233;
  font-size: 12px;
  background-color: white;
}

.storeName {
  font-size: 22px;
  font-weight: 600;
}
</style>